import React, { useState, useEffect } from 'react';
import { EditorRender, useEditor } from '@gitee/tide';
import { StarterKit } from '@gitee/tide-starter-kit';

// 导入样式文件
import '@gitee/tide/dist/style.css';
import 'highlight.js/styles/default.css';

interface TideRichTextEditorProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
}

const TideRichTextEditor: React.FC<TideRichTextEditorProps> = ({
  value,
  onChange,
  placeholder = '请输入内容...',
  className = ''
}) => {
  const [editorContent, setEditorContent] = useState(value);

  // 使用 useEditor hook 初始化编辑器
  const editor = useEditor({
    extensions: [StarterKit],
    content: value,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      setEditorContent(html);
      onChange(html);
    },
    editorProps: {
      attributes: {
        class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[200px] p-4',
        'data-testid': 'tide-editor',
        placeholder: placeholder,
      },
    },
  });

  // 当外部值变化时更新编辑器内容
  useEffect(() => {
    if (editor && value !== editorContent) {
      editor.commands.setContent(value);
      setEditorContent(value);
    }
  }, [value, editorContent, editor]);

  return (
    <div className={`border border-gray-300  ${className}`}>
      <EditorRender editor={editor} />
      
      {/* 自定义工具栏样式 */}
      <style>{`
        .tide-editor {
          min-height: 16rem;
        }

        .tide-menu-bar {
          border-bottom: 1px solid #e5e7eb;
          padding: 8px 12px;
          background-color: #f9fafb;
          display: flex;
          align-items: center;
          gap: 4px;
          flex-wrap: wrap;
        }
        
        .tide-menu-bar button {
          border: 1px solid #d1d5db;
          border-radius: 4px;
          background: white;
          cursor: pointer;
          font-size: 14px;
          transition: all 0.2s;
        }
        
        .tide-menu-bar button:hover {
          background-color: #f3f4f6;
          border-color: #9ca3af;
        }
        
        .tide-menu-bar button.is-active {
          background-color: #3b82f6;
          color: white;
          border-color: #3b82f6;
        }
        
        .ProseMirror {
          padding: 16px;
          min-height: 200px;
          outline: none;
        }
        
        .ProseMirror h1 {
          font-size: 2rem;
          font-weight: bold;
          margin-top: 1rem;
          margin-bottom: 0.5rem;
          color: #1f2937;
        }
        
        .ProseMirror h2 {
          font-size: 1.5rem;
          font-weight: bold;
          margin-top: 0.75rem;
          margin-bottom: 0.5rem;
          color: #374151;
        }
        
        .ProseMirror h3 {
          font-size: 1.25rem;
          font-weight: bold;
          margin-top: 0.5rem;
          margin-bottom: 0.25rem;
          color: #4b5563;
        }
        
        .ProseMirror blockquote {
          border-left: 4px solid #3b82f6;
          padding-left: 1rem;
          margin: 1rem 0;
          background-color: #eff6ff;
          padding: 0.5rem 1rem;
          border-radius: 0 4px 4px 0;
          font-style: italic;
        }
        
        .ProseMirror code {
          background-color: #f3f4f6;
          color: #dc2626;
          padding: 0.25rem 0.25rem;
          border-radius: 0.25rem;
          font-size: 0.875rem;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          border: 1px solid #e5e7eb;
        }
        
        
        
        .ProseMirror pre code {
          background-color: transparent;
          color: inherit;
          padding: 28px 16px !important;
          border: none;
          font-size: 0.875rem;
        }
        
        .ProseMirror ul {
          list-style-type: disc;
          padding-left: 1.5rem;
          margin: 0.5rem 0;
        }
        
        .ProseMirror ol {
          list-style-type: decimal;
          padding-left: 1.5rem;
          margin: 0.5rem 0;
        }
        
        .ProseMirror li {
          margin: 0.25rem 0;
        }
        
        .ProseMirror strong {
          font-weight: bold;
          color: #1f2937;
        }
        
        .ProseMirror em {
          font-style: italic;
          display: inline-block;
          transform: skewX(-12deg);
          transform-origin: bottom left;

        }
        
        .ProseMirror u {
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
};

export default TideRichTextEditor;